<template>
<!--  绑定微信账号-->
  <div class="home">
    <div v-if="isShow==0" :class="isBindBox==1?'bindBox':'bindBox2'">
      <header>
        账号绑定
      </header>
      <div class="contentBox">
        <el-form ref="newBindForm" :model="newBindForm" :rules="rules">
          <el-form-item prop="user">
            <div class="inputBox">
              <p>用户名</p>
              <el-input v-model="newBindForm.user"></el-input>
            </div>
          </el-form-item>
          <el-form-item prop="passWord">
            <div class="inputBox">
              <p>密码</p>
              <el-input type="password" v-model="newBindForm.passWord"></el-input>

            </div>
          </el-form-item>
          <el-form-item prop="vierficationCode" class="vieFormItemBox">
            <div class="vierficationBox">
              <p>验证码</p>
              <el-input type="number" v-model="newBindForm.vierficationCode" maxlength="4"></el-input>

              <div @click="changeCode()" style="width: 20%">
                <!-- 引入验证码组件 -->
                <identify :identifyCode="identifyCode"></identify>
              </div>
            </div>
            <!--          <span class="tips"> 请输入正确验证码</span>-->
          </el-form-item>
        </el-form>

        <el-button @click="bindAccount()" :loading="isLoading">绑定账号</el-button>
        <p class="tips">* 绑定账号，可以接收推送消息</p>
      </div>
    </div>
    <div class="failBox" v-else-if="isShow==1">
      <div class="contentBox" v-if="isCussess==2">
        <img src="./failPic.png">
        <h3> 绑 定 失 败 </h3>
        <p>{{dataList}}</p>
<!--        <el-button @click="toBind">重新绑定</el-button>-->
        <a href="https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx97326901810cd749&redirect_uri=https%3A%2F%2Fwww.jgbpy.com%2Fweb%2FappBind&response_type=code&scope=snsapi_base&state=123#wechat_redirect"> <el-button>重新绑定</el-button></a>
      </div>
      <div class="contentBox contentBox1" v-else-if="isCussess==1">
        <img src="./successPic.png">
        <h3> 绑 定 成 功 </h3>
      </div>
    </div>
  </div>
</template>
<script>
  import identify from '../../components/identify/number.vue'
  import {
    getBind
  } from '@/services/model/appLogin'
  import cryptoJs from "crypto-js";

  export default {
    name: "login",
    components: {identify},
    data() {
      return {
        //更具屏幕宽度修改样式
        isBindBox: 1,
        isCussess: 1,
        isLoading:false,
        //页面宽度
        screenWidth: document.body.clientWidth,
        rules: {
          user: {required: true, message: '请输入用户名',},
          passWord: {required: true, message: '请输入密码'},
          vierficationCode: {required: true, message: '请输入验证码',},
        },
        //未绑定状态
        isShow: 0,
        // 验证码初始值
        identifyCode: '1234',
        // 验证码的随机取值范围
        identifyCodes: '1234567890',
        //输入验证码
        newBindForm: {
          passWord: '',
          user: '',
          vierficationCode: '',
        }
      }
    },
    watch: {
      /* 监听*/
      screenWidth(val) {
        this.screenWidth = val;
        if (this.screenWidth > 500) {
          this.isBindBox = 2
        } else {
          this.isBindBox = 1
        }
      }
    },
    methods: {
      //返回重新绑定
      toBind() {
        this.newBindForm = {}
        this.isShow = 0
      },
      // 点击验证码刷新验证码
      changeCode() {
        this.identifyCode = ''
        this.makeCode(this.identifyCodes, 4)
      },
      // 生成一个随机整数  randomNum(0, 10) 0 到 10 的随机整数， 包含 0 和 10
      randomNum(min, max) {
        max = max + 1
        return Math.floor(Math.random() * (max - min) + min)
      },
      // 随机生成验证码字符串
      makeCode(data, len) {
        for (let i = 0; i < len; i++) {
          this.identifyCode += data[this.randomNum(0, data.length - 1)]
        }
      },
      //des加密
      encryptByDES(message, key) {
        var keyHex = cryptoJs.enc.Utf8.parse(key);
        var encrypted = cryptoJs.DES.encrypt(message, keyHex, {
          mode: cryptoJs.mode.ECB,
          padding: cryptoJs.pad.Pkcs7
        })
        return encrypted.ciphertext.toString();
      },
      //提交按钮
      bindAccount() {
        this.$refs.newBindForm.validate((valid) => {
          valid && this.isFormTrue()

        })
      },
      //表单验证后的方法
      isFormTrue() {
        if (this.newBindForm.vierficationCode !== this.identifyCode) {
          this.$notify({
            type: 'warning',
            title: '提示',
            message: '请输入正确的验证码'
          })
          this.changeCode()
          this.newBindForm.vierficationCode = ''
        } else {
          const DATA = {
            Account: this.newBindForm.user,
            PassWord: this.newBindForm.passWord,
          }
          let encryptedData = this.encryptByDES(JSON.stringify(DATA), 'interface.jgkj').toUpperCase()
          this.getBind(encryptedData)
        }


      },
      //接口请求
      async getBind(encryptedData) {
       this.isLoading=true
        this.newBindForm.code = this.$route.query.code
        if (this.$route.query.state) {
          this.newBindForm.state = this.$route.query.state
        }
        let res = await getBind(
          {
            encryptedData: encryptedData,
            code: this.newBindForm.code,
            state: this.newBindForm.state
          }
        )
        this.isLoading=false

        this.dataList = res.data
        if (this.newBindForm.user !== '') {
          if (res.data == '绑定成功') {
            this.isShow = 1
            this.isCussess = 1
          } else {
            this.isShow = 1
            this.isCussess = 2
          }
        } else {
          if (this.dataList == '账号已绑定') {
            this.isShow = 1
            this.isCussess = 1
          } else if (this.dataList == '账号未绑定') {
            this.isShow = 0
            // this.isCussess = 2
          }
        }


      },
      //初始化验证码
      verificationCode() {
        this.identifyCode = ''
        this.makeCode(this.identifyCodes, 4)
      }
    },
    beforeCreate() {

    },
    created() {
      //判断页面尺寸
      if (this.screenWidth > 1025) {
        this.isBindBox = 2
      } else {
        this.isBindBox = 1
      }
    },
    mounted() {

      this.verificationCode()
      const that = this
      window.onresize = () => {
        return (() => {
          window.screenWidth = document.body.clientWidth;
          that.screenWidth = window.screenWidth;
        })();
      }


    }
  }
</script>

<style scoped lang="less">
  .home {
    width: 100vw;
    height: 100vh;
    /*移动端样式*/
    .bindBox {
      width: 100vw;
      height: 100vh;
      background-image: url("./bindBg.png");
      background-size: 100% 100%;
      /deep/ .el-form-item {
        margin-bottom: 0px !important;
      }
      /deep/ .el-form-item__content {
        line-height: 20px !important;
      }
      /deep/ .el-input__inner {
        width: 100%;
        border-radius: 10px !important;
        font-size: 20px;
        background: #f1f5f9;
        border: none;
        box-shadow: 2px 2px 3px rgba(65, 163, 255, 0.5) inset;
      }
      img {
        width: 100%;
        height: 100%;
      }

      header {
        width: 100%;
        height: 40px;
        background: #fff;
        text-align: center;
        line-height: 40px;
        color: #01cfff;
        font-family: YouSheBiaoTiHei;
        text-align: center;
        font-size: 2em;


      }


      .contentBox {
        width: 90%;
        height: 340px;
        background: #fff;
        border-radius: 10px;
        margin: auto;
        margin-top: 35px;
        box-sizing: border-box;
        padding: 10vw 2vh;
        /*background: red;*/
        /*overflow: hidden;*/

        .tips {
          color: rgba(0, 0, 0, 0.5);
          margin-left: 20%;
          margin-top: 20px
        }

        /deep/ .el-form-item__error {
          top: 40% !important;
          left: -3% !important;
        }

        .vieFormItemBox {
          /deep/ .el-form-item__error {
            top: 50% !important;
            left: -3% !important;
            /*left: 30% !important;*/
          }
        }

        h3 {
          font-family: YouSheBiaoTiHei;
          text-align: center;
          font-size: 2em;
          margin-bottom: 20px;

        }

        .inputBox {
          margin-bottom: 20px;
          display: flex;
          align-items: center;
          justify-content: space-between;

          p {
            color: #547395;
            font-weight: 600;
            font-size: 120%;
            margin-bottom: 5%;
            width: 20%;
            height: 100%;
            /*line-height: ;*/
          }

          /deep/ .el-input {
            width: 80% !important;
          }


        }

        .vierficationBox {
          width: 100%;
          height: 10%;
          /*background: red;*/
          display: flex;
          justify-content: flex-start;
          margin-bottom: 2vh;

          p {
            color: #547395;
            font-weight: 600;
            font-size: 120%;
            margin-bottom: 5%;
            width: 20%;
            height: 100%;
            transform: translateY(10px);
            /*line-height: ;*/
          }

          /deep/ .el-input {
            width: 40%;
            height: 20px !important;
            margin-right: 4%;
            border-radius: 20px !important;
            font-size: 20px;
            box-shadow: 2px 2px 38px rgba(65, 163, 255, 0.5) inset;
          }
        }
      }

      /deep/ .el-button {
        width: 100%;
        height: 40px;
        line-height: 40px;
        margin: auto;
        margin-top: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: 600;
        color: white;
        border-radius: 20px;
        background: linear-gradient(to bottom, #50b8f5, #1f9ff0);
      }
    }
    /*web样式*/
    .bindBox2 {
      width: 100vw;
      height: 100vh;
      background-image: url("./bindBg.png");
      background-size: 100% 100%;

      /deep/ .el-form-item {
        margin-bottom: 0px !important;
      }

      /deep/ .el-form-item__content {
        line-height: 20px !important;
      }


      /deep/ .el-input__inner {
        width: 100%;

        border-radius: 10px !important;
        font-size: 20px;
        background: #f1f5f9;
        border: none;
        box-shadow: 2px 2px 3px rgba(65, 163, 255, 0.5) inset;
      }

      img {
        width: 100%;
        height: 100%;
      }

      header {
        width: 100%;
        height: 6vh;
        background: #fff;
        font-size: 6rem;
        text-align: center;
        line-height: 6vh;
        color: #01cfff;
        font-family: YouSheBiaoTiHei;
        text-align: center;
        font-size: 2em;


      }


      .contentBox {
        width: 50%;
        height: 50%;
        background: #fff;
        border-radius: 10px;
        margin: auto;
        margin-top: 4vh;
        box-sizing: border-box;
        padding: 10vw 8vh;
        padding-top: 50px;
        /*background: red;*/
        /*overflow: hidden;*/
        .tips {
          color: rgba(0, 0, 0, 0.5);
          margin-left: 40%;
          margin-top: 20px
        }
        /deep/ .el-form-item__error {
          top: 0% !important;
          left: 10% !important;
        }

        .vieFormItemBox {
          /deep/ .el-form-item__error {
            top: 10% !important;
            left: 10% !important;
            /*left: 30% !important;*/
          }
        }

        h3 {
          font-family: YouSheBiaoTiHei;
          text-align: center;
          font-size: 2em;
          margin-bottom: 20px;

        }

        .inputBox {
          margin-bottom: 20px;
          display: flex;
          align-items: center;
          justify-content: space-between;

          p {
            color: #547395;
            font-weight: 600;
            font-size: 120%;
            margin-bottom: 5%;
            width: 28%;
            height: 100%;
            /*transform: translateY(10px);*/
            /*line-height: ;*/
          }

          /deep/ .el-input {
            width: 90% !important;
            transform: translateY(-20px);

          }


        }

        .vierficationBox {
          width: 100%;
          height: 10%;
          /*background: red;*/
          display: flex;
          justify-content: flex-start;
          margin-bottom: 2vh;

          p {
            color: #547395;
            font-weight: 600;
            font-size: 120%;
            margin-bottom: 5%;
            width: 20%;
            height: 100%;
            transform: translateY(10px);
            margin-right: 4%;
            /*line-height: ;*/
          }

          /deep/ .el-input {
            width: 46%;
            height: 20px !important;
            margin-right: 4%;
            border-radius: 20px !important;
            font-size: 20px;
            box-shadow: 2px 2px 38px rgba(65, 163, 255, 0.5) inset;
          }
        }
      }

      /deep/ .el-button {
        width: 100%;
        height: 5vh;
        line-height: 5vh;
        margin: auto;
        margin-top: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: 600;
        color: white;
        border-radius: 20px;
        background: linear-gradient(to bottom, #50b8f5, #1f9ff0);
      }
    }

    .successBox {
      width: 100vw;
      height: 100vh;
      background-image: url("./successBoxBg.png");
      background-size: 100% 100%;
      text-align: center;
      box-sizing: border-box;
      padding-top: 10vh;

      img {
        height: 50%;
        margin: auto;
      }

      h3 {
        font-family: YouSheBiaoTiHei;
        text-align: center;
        font-size: 4em;
        color: white;
        margin: auto;

        margin-top: 10vh;
      }
    }

    .failBox {
      width: 100vw;
      height: 100vh;
      background: #f7f7f7;
      box-sizing: border-box;
      padding-top: 10vh;
      background-image: url("./bindBg.png");
      background-size: 100% 100%;

      .contentBox {
        width: 80%;
        height: 70%;
        background: white;
        margin: auto;

        box-shadow: 0px 0px 10px rgba(18, 96, 214, 0.5);
        text-align: center;
        box-sizing: border-box;
        padding-top: 10%;

        h3 {
          color: #fc6168;
          font-family: ZaoziYueYuan;
          font-size: 2em;
          margin-top: 2vh;
        }

        p {
          color: #999999;
          font-family: ZaoziYueYuan;

          margin-top: 2vh;
        }

        /deep/ .el-button {
          margin-top: 2vh;
          background: linear-gradient(to bottom, #50b8f5, #1f9ff0);
          color: white;
        }
      }

      .contentBox1 {
        h3 {
          color: #00de1b;
        }
      }
    }
  }

</style>
